<template>
  <canvas id="canvas" ref="canvas"></canvas>
</template>

<script lang="ts">
import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
import { BEngine } from './babylon/BEngine'
import { Demo1 } from './babylon/Demo1'
import { Demo2 } from './babylon/Demo2'
import { Demo3 } from './babylon/Demo3'
import { Demo4 } from './babylon/Demo4'
import { Demo5 } from './babylon/Demo5'
import { Demo6 } from './babylon/Demo6'
import { Demo7 } from './babylon/Demo7'
import { Animate } from './babylon/Animate'
import { Text } from './babylon/Text'
import { Group } from './babylon/Group'
import { Animate2 } from './babylon/Animate2'
import { Sky } from './babylon/Sky'
import { Image } from './babylon/Image'

export default defineComponent({
  name: 'App',
  setup() {
    const canvas = ref(null)
    // let sky: Sky | null = null
    onMounted(() => {
      // const demo1 = new Demo1(canvas.value as unknown as HTMLCanvasElement)
      // demo1.render()
      // const demo2 = new Demo2(canvas.value as unknown as HTMLCanvasElement)
      // demo2.render()
      // const demo3 = new Demo3(canvas.value as unknown as HTMLCanvasElement)
      // demo3.render()
      // const demo4 = new Demo4(canvas.value as unknown as HTMLCanvasElement)
      // demo4.render()
      // const demo5 = new Demo5(canvas.value as unknown as HTMLCanvasElement)
      // demo5.render()
      // const demo6 = new Demo6(canvas.value as unknown as HTMLCanvasElement)
      // demo6.render()
      // const animate = new Animate(canvas.value as unknown as HTMLCanvasElement)
      // animate.render()
      // const text = new Text(canvas.value as unknown as HTMLCanvasElement)
      // text.render()
      // const group = new Group(canvas.value as unknown as HTMLCanvasElement)
      // group.render()
      // const animate2 = new Animate2(
      //   canvas.value as unknown as HTMLCanvasElement
      // )
      // animate2.render()

      // sky = new Sky(canvas.value as unknown as HTMLCanvasElement)
      // sky.render()

      // @ts-ignore
      // canvas.value.onclick = function () {
      //   animate2.load('2.stl')
      // }

      // const bEngine = new BEngine(canvas.value as unknown as HTMLCanvasElement)
      // bEngine.render()
      const image = new Image(canvas.value as unknown as HTMLCanvasElement)
      image.render()
    })

    onUnmounted(() => {
      // sky?.engine.dispose()
    })

    return {
      canvas,
    }
  },
})
</script>

<style>
#app,
body,
html,
#canvas {
  height: 100%;
  width: 100%;
  margin: 0;
}
</style>
